<template>
  <v-card flat class="InvoiceDetails-Container rounded-lg">
    <v-toolbar
      class="header mb-0"
      tile
      elevation="0"
      color="#626C84"
      height="40"
      dense
    >
      <v-toolbar-title>Invoice Details</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn class="icon-btn mr-4" width="16" height="16" icon>
        <v-icon color="#fff">mdi-file</v-icon>
      </v-btn>
      <v-btn class="icon-btn mr-0" width="16" height="16" icon>
        <v-icon color="#fff">mdi-content-save</v-icon>
      </v-btn>
    </v-toolbar>
    <div v-if="invoiceDetails" class="details-content text-left">
      <v-card min-height="280" flat class="mt-4">
        <v-row no-gutters class="pl-6 basic-content">
          <v-col :cols="8" class="text-left">
            <v-spacer>
              <v-col class="pt-0 line">
                <v-row no-gutters>
                  <v-col :cols="2">Customer Name</v-col>
                  <v-col :cols="9">
                    <v-text-field
                      v-model="invoiceDetails.customerName"
                      class="gray-input"
                      dense
                      hide-details
                      solo
                      label="please enter password Customer Name"
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-col>
              <v-col class="pt-0 line">
                <v-row no-gutters class="align-start">
                  <v-col :cols="2">Description</v-col>
                  <v-col :cols="9">
                    <v-textarea
                      v-model="invoiceDetails.description"
                      class="gray-input"
                      dense
                      hide-details
                      height="72"
                      solo
                      no-resize
                      label="please enter password Description"
                    >
                    </v-textarea>
                  </v-col>
                </v-row>
              </v-col>
              <v-col class="pt-0 line">
                <v-row no-gutters>
                  <v-col :cols="2">Phase:</v-col>
                  <v-col :cols="1">
                    <v-text-field
                      v-model="invoiceDetails.phase"
                      class="gray-input text-right"
                      dense
                      hide-details
                      label="please enter phase"
                      solo
                      type="number"
                    ></v-text-field>
                  </v-col>
                  <v-col :cols="1" :offset="1">Inv %</v-col>
                  <v-col :cols="1">
                    <v-text-field
                      v-model="invoiceDetails.inv"
                      class="gray-input text-right"
                      dense
                      hide-details
                      label="please enter inv%"
                      solo
                      type="number"
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-col>
            </v-spacer>
          </v-col>
        </v-row>
      </v-card>
      <v-btn-toggle
        v-model="selectedNav"
        borderless
        active-class="active-btn"
        class="rounded-b-0 rounded-t-lg nav"
        dense
      >
        <v-btn color="#D9D9D9" width="30%" value="Items">Items</v-btn>
        <v-btn color="#D9D9D9" width="30%" value="T&C">Terms & Condition</v-btn>
      </v-btn-toggle>
      <v-divider></v-divider>
      <v-window class="invoice-window" v-model="selectedNav">
        <v-window-item value="Items">
          <InvoiceItems></InvoiceItems>
        </v-window-item>
        <v-window-item value="T&C">
          <TermsConditions :list="termsConditionsList"></TermsConditions>
        </v-window-item>
      </v-window>
    </div>
    <v-skeleton-loader v-else type="list-item-three-line@7"></v-skeleton-loader>
    <Dialog v-model="showDialog" :title="dialogTitle"></Dialog>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import InvoiceItems from "@/components/Invoice/InvoiceItems/InvoiceItems.vue";
import TermsConditions from "@/components/Quotation/TermsConditions/TermsConditions.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
interface IItems {
  lineGroup: string;
  line: string;
  description: string;
  unitRate: string;
  qty: string;
  totalAmt: string;
  inv: string;
  invAmt: string;
}
interface IInvoiceDetails {
  customerName: string;
  description: string;
  phase: number;
  inv: number;
  items: IItems[];
}
@Component({
  components: {
    InvoiceItems,
    TermsConditions,
    Dialog,
  },
  props: {
    quoteId: String,
  },
})
export default class InvoiceDetails extends Vue {
  get propQuoteId() {
    return this.$props.quoteId;
  }

  // Terms & Condition
  termsConditionsList = [
    "12 months defect liability period Of all contract items. The project period is 40 working Days (Sunday, Public Holiday excluded)",
    "With respect tO Minor work submission. all required documents and drawings shall be prepared. and submitted in accordance with latest MWCS that implemented by BD of GOV.",
    "Contractor responsible for keeping public places clean during construction ,packing construction material and leaving in the garbage collection place designated by management office each day. All debris / construction wastes shall be disposed to Waste Disposal.",
    "All amount is the value calculated based on Daytime WOrk. If decoration is progress at night, the item cost will be Doubled as the amount for your reference",
  ];

  // Dialog
  dialogTitle = "";
  showDialog = false;

  // nav
  selectedNav = "Items";

  // basic
  invoiceDetails: IInvoiceDetails | null = null;
  @Watch("propQuoteId", { immediate: true })
  getQuoteDetails(quoteId: string) {
    console.log(quoteId);
    this.invoiceDetails = null;
    new Promise<IInvoiceDetails>((res) => {
      const invoiceDetails = {
        customerName: "Cafe De Coral",
        description: "User Testing",
        phase: 10,
        inv: 30,
        items: [
          {
            lineGroup: "1.00",
            line: "1.01",
            description: "Group 1 items 1",
            unitRate: "78,000.00",
            qty: "2",
            totalAmt: "156,000.00",
            inv: "30%",
            invAmt: "97,200.00",
          },
          {
            lineGroup: "1.00",
            line: "1.02",
            description: "Group 1 items 2",
            unitRate: "108,000.00",
            qty: "3",
            totalAmt: "324,000.00",
            inv: "25%",
            invAmt: "39,000.00",
          },
          {
            lineGroup: "2.00",
            line: "2.01",
            description: "Group 1 items 1",
            unitRate: "78,000.00",
            qty: "2",
            totalAmt: "156,000.00",
            inv: "25%",
            invAmt: "39,000.00",
          },
          {
            lineGroup: "2.00",
            line: "2.02",
            description: "Group 1 items 2",
            unitRate: "108,000.00",
            qty: "3",
            totalAmt: "324,000.00",
            inv: "30%",
            invAmt: "97,200.60",
          },
        ],
      };
      setTimeout(() => {
        res(invoiceDetails);
      }, 3000);
    }).then((res) => {
      this.invoiceDetails = res;
      this.$store.commit("InvoiceStore/setInvoiceDetails", this.invoiceDetails);
    });
  }

  destroyed() {
    this.$store.commit("InvoiceStore/setInvoiceInfo", null);
    this.$store.commit("InvoiceStore/setInvoiceDetails", null);
  }
}
</script>
<style lang="scss" scoped>
@import "./InvoiceDetails.scss";
</style>
